<template>
  <a-tabs :default-active-key="activeIndex" @change="handleTabSelect">
    <a-tab-pane key="1" tab="生产任务">
      <task-table
        :columns="this.$staticMenu.productHistoryColumns"
        :url="tableUrl"
        :type="tableType"
        :params="tableParams"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :rowSelection="rowSelection"
        rowKeyName="id"
        ref="productTable"
        @onSelect="tableOnSelect"
      >
        <!-- 补充搜索条件 -->
        <a-row slot="searchCri">
          <a-col :span="3">
            <a-input class="searchCriteria" placeholder="任务名称" v-model="tableParams.name" />
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="criteriaSearchProduct">
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="clearCriteriaProduct">
              <a-icon type="sync" />重置
            </a-button>
          </a-col>
          <a-col :span="15" style="text-align:right">
            <a-button type="primary">
              <a-icon type="snippets" />任务下发
            </a-button>
          </a-col>
        </a-row>
        <span slot="statusSwitch" slot-scope="props">
          <span v-if="props.record.status=='审批通过'" class="text-success">{{ props.record.status }}</span>
          <span v-if="props.record.status=='审批拒绝'" class="text-danger">{{ props.record.status }}</span>
          <span v-if="props.record.status=='未审批'">{{ props.record.status }}</span>
        </span>
        <!-- end -->
      </task-table>
    </a-tab-pane>
    <a-tab-pane key="2" tab="评估任务" force-render>
      <unit-table
        :columns="this.$staticMenu.estimateHistoryColumns"
        :url="tableEstimateUrl"
        :type="tableEstimateType"
        :params="tableParamsEstimate"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :rowSelection="rowSelection1"
        rowKeyName="id"
        ref="estimateTable"
        @onSelect="tableOnSelect"
      >
        <!-- 补充搜索条件 -->
        <a-row slot="searchCri">
          <a-col :span="3">
            <a-select v-model="tableParamsEstimate.classify" class="searchCriteria">
              <a-select-option v-for="(item, key) of classify" :key="item" :value="item">{{ item }}</a-select-option>
            </a-select>
          </a-col>

          <a-col :span="3">
            <a-input class="searchCriteria" placeholder="任务名称" v-model="tableParamsEstimate.name" />
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="criteriaSearchEstimate">
              <a-icon type="search" />查询
            </a-button>
            <a-button @click="clearCriteriaEstimate">
              <a-icon type="sync" />重置
            </a-button>
          </a-col>
          <a-col :span="12" style="text-align:right">
            <a-button type="primary">
              <a-icon type="snippets" />任务下发
            </a-button>
          </a-col>
        </a-row>
        <span slot="statusSwitch" slot-scope="props">
          <span v-if="props.record.status=='审批通过'" class="text-success">{{ props.record.status }}</span>
          <span v-if="props.record.status=='审批拒绝'" class="text-danger">{{ props.record.status }}</span>
          <span v-if="props.record.status=='未审批'">{{ props.record.status }}</span>
        </span>

        <!-- end -->
      </unit-table>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import {
  GETPRODUCTLIST,
  GETESTIMATELIST,
  GETALLCLASSIFY
} from '@/../static/js/apis.js';
import unitTable from '@/common/tableCheck';
import taskTable from '@/common/tableCheck1';

export default {
  name: 'allUnit',
  components: {
    unitTable,
    taskTable
  },
  data () {
    let userRole = localStorage.getItem('role')
    return {
      tableSelectedKeys: [],
      tableUrl: GETPRODUCTLIST.url, // 调用表格组件，必须参数，后台数据接口
      tableType: GETPRODUCTLIST.type, // 调用表格组件，必须参数，后台方法方法（get，post）
      tableEstimateUrl: GETESTIMATELIST.url, // 调用表格组件，必须参数，后台数据接口
      tableEstimateType: GETESTIMATELIST.type, // 调用表格组件，必须参数，后台方法方法（get，post）
      pageSize: 15,
      pageSizeOptions: ['15', '20', '40'],
      /* 调用表格组件，可选参数，其他相关搜索条件 */
      // usereRole:"",
      // userRole:localStorage.getItem("role"),
      tableParams: {
        name: '',
        // creator:""
        creator:
          userRole.indexOf('0') > -1 ? '' : localStorage.getItem('username')
      },
      tableParamsEstimate: {
        classify: '全部分类',
        name: '',
        // creator:""
        creator:
          userRole.indexOf('0') > -1 ? '' : localStorage.getItem('username')
      },
      classify: [],
      activeIndex: '1'
    }
  },
  methods: {
    /* 表格checkbox选中事件 */
    tableOnSelect (selectedRowKeys, selectedRows) {
      this.tableSelectedKeys = selectedRowKeys
    },
    /* 查询按钮 */
    criteriaSearchProduct () {
      this.$refs.productTable.fetch(1)
    },
    /* 查询按钮 */
    criteriaSearchEstimate () {
      this.$refs.estimateTable.fetch(1)
    },
    /* 重置按钮 */
    clearCriteriaProduct () {
      this.tableParams.name = '';
      this.rowSelection.onChange([ ],[ ])
      this.criteriaSearchProduct()
    },
    /* 重置按钮 */
    clearCriteriaEstimate () {
      this.tableParamsEstimate.classify = '全部分类';
      this.tableParamsEstimate.name = '';
      this.rowSelection1.onChange([ ],[ ])
      this.criteriaSearchEstimate()
    },
    getStaticData () {
      let self = this
      GETALLCLASSIFY('', function (res) {
        self.classify = res
      })
      // self.userRole=localStorage.getItem("role");
      // self.creator=this.userRole.indexOf('0')>-1?'null':localStorage.getItem("username")
      // console.log(self.creator)
    },
    handleTabSelect (key) {
      localStorage.setItem('activeIndex', key)
    }
  },
  created () {
    this.getStaticData()
    let activeIndex = localStorage.getItem('activeIndex')
    this.activeIndex = activeIndex
    // this.creator=this.userRole.indexOf('0')>-1?'null':localStorage.getItem("username");
    // console.log(this.creator);
  },

  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.tableSelectedKeys || [], // 选中行的key当props传值过来时，默认选中
        selectedRows: [], // 选中行的内容
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
          this.rowSelection.selectedRows = selectedRows
          this.tableOnSelect(selectedRowKeys, selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.status !== '审批通过' // Column configuration not to be checked
          }
        })
      }
    },
     rowSelection1 () {
      return {
        selectedRowKeys: this.tableSelectedKeys || [], // 选中行的key当props传值过来时，默认选中
        selectedRows: [], // 选中行的内容
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection1.selectedRowKeys = selectedRowKeys
          this.rowSelection1.selectedRows = selectedRows
          this.tableOnSelect(selectedRowKeys, selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.status !== '审批通过' // Column configuration not to be checked
          }
        })
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.searchCriteria {
  width: 90%;
}
.actionBtn button:not(:last-child),
.ant-row button:not(:last-child) {
  margin-right: 20px;
}
/deep/ .ant-tabs-nav-wrap {
  text-align: center;
}
/deep/.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane{
  overflow-x:scroll;
}
</style>
